<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <div class="search">
        <div class="search">
          <div style="display: flex;">
            <div class="whead">
              <div style="display: flex; ">
                <div style="width: 110px;" class="left">输入搜索 :</div>
                <el-select
                  v-model="types"
                  placeholder="全部"
                  @change="typesChange(types)"
                >
                  <el-option
                    v-for="item in Type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input
                  v-model="input"
                  @change="btnchange(input)"
                  style="width: 240px;"
                  placeholder="输入账户/姓名"
                >
                </el-input>
              </div>
            </div>

            <div class="whead" style="margin-left: 20px;">
              <div class="left">所属部门 :</div>
              <el-select
                v-model="staty"
                placeholder="全部"
                @change="statusChange(staty)"
              >
                <el-option
                  v-for="item in statu"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="lists">
        <div class="list">
          <div>
            <img
              class="list-img"
              src="../../../assets/images/查询数据列表.png"
              alt=""
            />
          </div>
          <div>
            数据列表
          </div>
        </div>
        <div style="margin-right: 20px;">
          <el-button @click="addUser" type="primary">添加</el-button>
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table border :data="listData" style="width: 100%" align="center">
          <el-table-column
            prop="account"
            label="成员账号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="email"
            label="邮箱地址"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="email" label="所属部门" align="center"></el-table-column> -->
          <el-table-column
            prop="createTime"
            label="添加时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lastLoginTime"
            label="登录时间"
            align="center"
          ></el-table-column>
          <el-table-column label="启用状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="0"
                :inactive-value="1"
                @change="updateEnableStatus(scope.row.status, scope.row.id)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <div class="slot">
                <el-button
                  type="primary"
                  size="small"
                  @click="jurisdictionSet(scope.row.id)"
                  >权限设置
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="editClick(scope.row.id)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="remove(scope.row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          :title="title"
          :visible.sync="centerDialogVisible"
          width="30%"
          center
          @close="btn"
        >
          <div
            style="display: flex; align-items: center; justify-content: center;"
          >
            <div>成员名称:</div>
            <el-input
              v-model="name"
              autocomplete="off"
              style="width: 240px; margin-left: 20px;"
            >
            </el-input>
          </div>
          <div
            style="display: flex; align-items: center; justify-content: center; margin-top: 20px; "
          >
            <div>成员姓名:</div>
            <el-input
              v-model="userName"
              autocomplete="off"
              style="width: 240px; margin-left: 20px;"
            >
            </el-input>
          </div>
          <div
            style="display: flex; align-items: center; justify-content: center; margin-top: 20px; "
          >
            <div>邮箱地址:</div>
            <el-input
              v-model="email"
              autocomplete="off"
              style="width: 240px; margin-left: 20px;"
            >
            </el-input>
          </div>
          <div
            style="display: flex; align-items: center; justify-content: center;"
          >
            <div>所属部门:</div>
            <el-select
              v-model="accounts"
              placeholder="全部"
              @change="accountChange(accounts)"
              style="width: 240px; margin-left: 20px; margin-top: 20px;"
            >
              <el-option
                v-for="item in statut"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div
            style="display: flex; align-items: center; justify-content: center; margin-top: 20px; "
          >
            <div>{{ mypassword }}:</div>
            <el-input
              v-model="logPassword"
              autocomplete="off"
              style="width: 240px; margin-left: 20px;"
            >
            </el-input>
          </div>
          <div
            style="display: flex; align-items: center; justify-content: center; margin-top: 20px; "
          >
            <div>{{ openpassword }}:</div>
            <el-input
              v-model="verifyPassword"
              autocomplete="off"
              style="width: 240px; margin-left: 20px;"
            >
            </el-input>
          </div>
          <div
            style="display: flex; align-items: center; justify-content: center; margin-top: 20px; height: 400rpx; "
          >
            <div>备注信息:</div>
            <el-input
              v-model="describe"
              type="textarea"
              autocomplete="off"
              placeholder="请输入内容"
              maxlength="50"
              style="width: 240px; margin-left: 20px;"
            ></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDepartment">确 定</el-button>
          </span>
        </el-dialog>
        <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :with-header="false"
          size="15%"
          @close="closeBtn"
        >
          <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-tree
            :data="jurisdiction"
            show-checkbox
            default-expand-all
            node-key="menuId"
            ref="tree"
            :default-checked-keys="resourceCheckedKey"
            :props="defaultProps"
          >
          </el-tree>
          <div class="centenr">
            <el-button @click="preserve" type="success">保存</el-button>
          </div>
        </el-drawer>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px; ">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import CommonTable from "@/components/Table/index.vue";
import {
  adminAccount,
  departmentList,
  adminAccountSave,
  adminAccountRemove,
  adminAccountStatus,
  getAccountPermission,
  openSaveAccountPermission
} from "@/api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      mypassword: "登录密码",
      openpassword: "确认密码",
      dialogImageUrl: "",
      fileData: [],
      dialogVisible: false,
      fishgrow: [{ id: 1, weight: 0.5, grow: 0 }],
      dialogVisible: false,
      input: "", //搜索
      fishName: "", //鱼苗名称搜索
      principal: "", //负责人搜索
      city: "", //城市搜索
      staty: "", //水库状态
      loading: false,
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: -1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      listData: [],
      enableStatus: "", //	启用状态 0.启用 1.禁用
      fryName: "", //鱼苗名称
      fryNo: "", //鱼苗编号
      dialogFormVisible: false,
      form: {
        name: "",
        userName: "",
        email: "",
        logPassword: "",
        verifyPassword: "",
        describe: "",
        accounts: ""
      },
      types: "",
      Type: [{ value: 1, label: "账户" }, { value: 2, label: "用户" }],
      userType: [{ value: 1, label: "账户" }, { value: 2, label: "用户" }],
      growthCycleList: [],
      formLabelWidth: "120px",
      form: {
        code: "",
        name: ""
      },
      value: "",
      departmentId: "", //部门Id
      departmentIds: "",
      statu: [],
      statut: [],
      centerDialogVisible: false,
      name: "",
      userName: "",
      email: "",
      logPassword: "",
      verifyPassword: "",
      describe: "",
      accounts: "",
      id: "",
      reservoirId: "",
      jurisdiction: [],
      defaultProps: {
        children: "permissionList",
        label: "menuName"
      },
      menuList: [], //菜单id
      checkAll: false,
      drawer: false,
      resourceCheckedKey: [],
      title: "添加成员"
    };
  },
  created() {
    this.adminAccount(this.pageSize, this.currentPage);
    this.departmentList();
  },
  methods: {
    // 保存权限
    async preserve() {
      // 获取选中的id
      let arr = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());

      let data = {
        accountId: this.reservoirId,
        menuList: arr
      };
      let result = await openSaveAccountPermission(data);
      if (result.code == 0) {
        this.drawer = false;
        this.checkAll = false;
        Toast.success("保存权限成功");
        window.location.reload();
      } else {
        Toast.fail("保存权限失败");
      }
    },
    closeBtn() {
      this.checkAll = false;
    },

    // 全选
    handleCheckAllChange(val) {
      if (this.checkAll) {
        //全选
        this.$refs.tree.setCheckedNodes(this.jurisdiction);
      } else {
        //取消选中
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    // 清空
    btn() {
      this.name = "";
      this.describe = "";
      this.userName = "";
      this.email = "";
      this.logPassword = "";
      this.account = "";
      this.id = "";
    },
    // 部门列表
    async departmentList() {
      let result = await departmentList();
      if (result.code == 0) {
        result.data.forEach(item => {
          this.statu.push({ id: item.id, name: item.departmentName });
          this.statut.push({ id: item.id, name: item.departmentName });
        });
      }
    },

    //   成员分页
    async adminAccount(limit, page) {
      let params = {
        searchContent: this.input,
        departmentId: this.departmentId,
        searchType: this.types,
        limit: this.pageSize,
        page: this.currentPage
      };
      let result = await adminAccount(params);
      if (result.code == 0) {
        this.listData = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
      }
    },
    // 删除
    async remove(e) {
      this.$confirm("此操作删除成员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let data = {
            accountId: e
          };
          let result = await adminAccountRemove(data);
          if (result.code == 0) {
            this.bannerConfig(this.pageSize, this.currentPage);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 查询账号权限
    async jurisdictionSet(e) {
      this.reservoirId = e;
      this.drawer = true;
      let data = {
        accountId: e
      };
      let result = await getAccountPermission(data);
      if (result.code == 0) {
        this.jurisdiction = result.data;
        this.resourceCheckedKey = this.deepid(result.data);
      }
    },
    //   默认选中数据递归
    deepid(arr) {
      var crr = [];
      arr.forEach(v => {
        if (v.hasFlag && v.permissionList.length == 0) {
          crr.push(v.menuId);
        }
        if (v.permissionList.length > 0) {
          crr = [...crr, ...this.deepid(v.permissionList)];
        }
      });
      return crr;
    },
    // 编辑
    async editClick(e) {
      this.title = "编辑成员";
      this.openpassword = "新的密码";
      this.mypassword = "旧的密码";
      this.centerDialogVisible = true;
      this.id = e;
      this.listData.forEach(item => {
        if (e == item.id) {
          this.name = item.account;
          this.userName = item.userName;
          this.email = item.email;
          this.describe = item.remark;
          this.accounts = item.departmentId;
        }
      });
    },
    // 添加成员
    async addDepartment() {
      this.centerDialogVisible = false;
      let data = {
        account: this.name,
        departmentId: this.accounts,
        email: this.email,
        password: this.logPassword,
        remark: this.describe,
        userName: this.userName,
        id: this.id
      };
      let result = await adminAccountSave(data);
      if (result.code == 0) {
        this.adminAccount(this.pageSize, this.currentPage);
        Toast.success("成功");
      } else {
        Toast.fail("失败");
      }
    },
    // 添加按钮
    addUser() {
      this.centerDialogVisible = true;
    },

    // 更新状态
    async updateEnableStatus(e, id) {
      let data = {
        accountId: id,
        status: e
      };
      let result = await adminAccountStatus(data);
      if (result.code == 0) {
        this.adminAccount(this.pageSize, this.currentPage);
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.adminAccount(this.pageSize, this.currentPage);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.adminAccount(this.pageSize, this.currentPage);
    },
    //  输入搜索
    btnchange(e) {
      this.searchContent = e;
      this.adminAccount(this.pageSize, this.currentPage);
    },
    // 输入搜索
    typesChange(e) {
      this.types = e;
    },
    accountChange(e) {
      this.departmentIds = e;
    },
    // 所属部门
    statusChange(e) {
      this.departmentId = e;
      this.adminAccount(this.pageSize, this.currentPage);
    },
    search() {},
    // 跳转到添加水库页面
    addEvent() {
      // this.$router.push('addReservoir')
    }
  }
};
</script>

<style lang="scss" scoped>
.centenr {
  text-align: center;
}

// 抽屉上下滑动
::v-deep .el-drawer__body {
  overflow: auto;
}

/*.隐藏抽屉滚动条*/
::v-deep .el-drawer__container ::-webkit-scrollbar {
  display: none;
}
.left {
  margin-right: 10px;
}
.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}
::v-deep .el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .search[data-v-1c1a5e1d] {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 80px;
  margin: 0 20px;
}

::v-deep .el-upload-list--picture .el-upload-list__item {
  overflow: hidden;
  z-index: 0;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 10px 10px 90px;
  height: 92px;
  width: 100px;
}

::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

.lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  // display: flex;
  align-items: center;
  // height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}
</style>
